# Paginado / Pagination

### Código

```
<pagination></pagination>
```



### Tokens

**Color**

| Class                          | Property         | Color token |
| :----------------------------- | :--------------- | :---------- |
| `.bx--pagination`              | background-color | `$ui-01`    |
| `.bx--pagination`              | border-top       | `$ui-03`    |
| `.bx--pagination__text`        | text color       | `$text-02`  |
| `.bx--pagination__button-icon` | fill             | `$icon-01`  |

**Tipografía**

| Class                   | Type token    |
| :---------------------- | :------------ |
| `.bx--pagination__text` | `$caption-01` |

**Estructura**

| Class                               | Property                    | Spacing token |
| :---------------------------------- | :-------------------------- | :------------ |
| `.bx--pagination`                   | height                      | –             |
| `.bx--pagination`                   | border                      | –             |
| `.bx--pagination`                   | padding-left, padding-right | `$spacing-05` |
| `.bx--pagination .bx--select-input` | padding-left, padding-right | `$spacing-05` |
| `.bx--pagination__button`           | height, width               | –             |
| `arrow`                             | icon size                   | –             |